import React, {useState} from 'react';
import {LoadingOutlined} from '@ant-design/icons';
import './index.less';

export type IframeContentProps = {
    url: string;
    isLoading: boolean;
    menuid?: string;
};

const IframeContent: React.FC<IframeContentProps> = (props) => {
    const {url, isLoading, menuid} = props;
    const [loading, setLoading] = useState<boolean>(isLoading);
    const [menuId] = useState<string | undefined>(menuid);

    return (
        <div className={'page_loading_container'}>
            {
                loading === true ?
                    <div className={'page_loading_container_loading'}>
                        <div className={'page_loading_container_icon'}>
                            <LoadingOutlined style={{fontSize: 24}} spin/>
                            <div style={{marginLeft: '6px', fontSize: '16px'}}>加载中...</div>
                        </div>
                    </div> : null
            }
            <iframe
                onLoad={() => {
                    setLoading(false);
                }} id="mainIframe" name="mainIframe" menu-id={menuId} src={url}
                className={'page_loading_container_iframe'} />
        </div>
    );
};
export default IframeContent;
